今天的故事 上一篇做到註冊後自動登入，使用者已經可以直接進入會員頁面。 但接著我開始遇到另一個問題： 使用者雖然已經登入了，前端到底是怎麼知道現在登入的是誰？...
模組二｜工程底座與可驗收的 AI（Day 5–9） 《一條線救一隻狗》是我用 PixiJS 和 Matter.js 做的網頁小遊戲，畫面上三十幾張 SVG...
模組二｜工程底座與可驗收的 AI（Day 5–9） 《一條線救一隻狗》是我用 PixiJS 和 Matter.js 做的一款網頁小遊戲：玩家畫一條線，讓狗安...
今天的故事 一開始做註冊頁時，我其實只知道要把表單完成，對後面的會員流程幾乎毫無頭緒。 直到團隊開始討論「登入前和登入後能使用哪些功能」，我才發現，註冊並不是把...
模組二｜工程底座與可驗收的 AI（Day 5–9） 昨天講座標系那條規則只寫了一句話就撐住 44 個檔案。今天把那句話所在的檔案整份打開。 這個 repo...
模組二｜工程底座與可驗收的 AI（Day 5–9） 昨天把範圍畫完了。今天進模組二，講開工那一刻第一個真正無法反悔的決定。 不是選 PixiJS，不是選 V...
今天的故事 上一篇，我完成了新增與顯示寵物資料的流程。 使用者填完表單後，資料可以送到後端、寫進資料庫，最後顯示成 Dashboard 上的寵物卡片。 第一次看...
模組一｜立案與選型（Day 1–4） Day 2 講規格能自動擋下什麼，Day 3 講選型換來多少工作量。今天是開工前的第三件事：範圍。 三個數字先攤開，全...
今天的故事 上一篇，我處理了前端表單、API 與資料庫欄位名稱不同的問題。 當欄位終於能正確對應後，新增寵物的資料也可以順利送到後端，並寫入資料庫。 但資料成功...
模組一｜立案與選型（Day 1–4） 這個系列在做一款瀏覽器小遊戲：玩家畫一條線，擋住從蜂巢飛出來的蜜蜂，讓狗狗撐過十秒。 打開網頁就能玩，一局十秒可以玩完...
今天的故事 上一篇提到，我第一次看到寵物資料從資料庫經過後端 API，最後顯示在前端卡片上。 那一刻真的很有成就感。 原本以為資料已經成功出現在畫面上，代表寵物...
模組一｜立案與選型（Day 1–4） 昨天講完這 30 天要交付什麼。今天回到開工前的那份文件。 先攤開事實：這個專案動工之前，有一份 2,419 行的 P...
今天的故事 正式開始製作 PawPal 後，我第一個接手的任務，是寵物基本資料相關功能。 我接手時，Dashboard 已經使用假資料呈現寵物卡片。之後我負責建...
模組一｜立案與選型（Day 1–4） 先給結果，再講過程。 遊戲在這裡，開了就能玩，不用註冊：https://save-the-dog-web.vercel...
今天的故事 這篇要從我第一次正式打開 PawPal 專案開始。 原本以為只要找到自己要修改的畫面就好，沒想到眼前卻是一大堆資料夾、元件、API、後端和資料庫設定...
今天的故事 在 Day 3，我整理了自己第一次在 PawPal 團隊專案裡使用 Git 和 GitHub 的經驗。 當專案方向確定、協作流程也開始建立後，接下來...
今天要解的問題 沒有 Tailwind、沒有 UI library，一切要自己寫。如果直接開始寫 .card { border-radius: 14px }、....
專案名稱 Gold Dashboard｜XAUUSD 市場資料研究介面 專案簡介 Gold Dashboard 是一個以市場研究為導向的 Web 儀表板，將 X...
專案資訊 專案名稱 XAUUSD Spread Comparison｜多券商帳戶成本比較頁 專案簡介 XAUUSD Spread Comparison 是一個以...
今天的故事 在 Day 2，我整理了 PawPal 這個專案是怎麼出現的，也回顧了自己第一次加入團隊專案時的感受。 當專案方向確定後，接下來就要正式進入分工與協...
專案資訊 專案名稱 黃金儀表板｜XAUUSD 資料更新與 Fail-soft 介面 專案簡介 黃金儀表板是一個以市場研究為導向的 XAUUSD Web 儀表板，...
今天的故事 在 Day 1，我先介紹了自己，也說明為什麼想挑戰這次 iThome 鐵人賽。 從今天開始，我想正式把主線帶到 PawPal 這個專案。 這 30...
今天的故事 這是我第一次挑戰 iThome 鐵人賽。 在正式開始分享 PawPal 這個專案之前，我想先從自己開始說起。 我不是本科系出身，也不是一開始就很會寫...
專案資訊 專案名稱 黃金儀表板｜XAUUSD K線、支撐壓力與 AI 市場分析 專案簡介 黃金儀表板是一個以市場研究為導向的XAUUSD Web儀表板，將即時價...
「只要條件成立，就一直重複執行」 while 基本語法 while (條件) { // 要重複執行的程式 } 第一個範例：數到5 let i = 1;...
for 是 JavaScript 中最常用的迴圈，適合在知道要重複幾次的情況使用 可以把它想成： 「每天照著待辦事項，一件一件完成。」 例如：點名全班 30 位...
findIndex() 是 JavaScript 陣列中很常用的方法之一 它和 find() 很像，但最大的差別是： find() → 回傳符合條件的元素fin...
什麼是 find()？ 如果 map() 是「加工資料」、filter() 是「篩選多筆資料」，那麼 find() 就是「尋找第一筆符合條件的資料」 它會從陣...
關於filter() filter() 是用來「挑資料」而不是「改資料」 從陣列中篩選出符合條件的資料，並回傳一個新的陣列。 它不會修改原本的陣列。 fil...
什麼時候該使用 map()？ 當你的需求是「每個元素都要處理一次，而且要得到一個新的陣列」時，就很適合使用 map() map() = 將陣列中的每一個資料，...
R-HAO
harryfan
Eyk
iThome鐵人賽
看影片追技術